import { Typography, styled } from '@mui/material'
import { Link } from 'react-router-dom'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'column',
	width: '420px',
	padding: '16px',
	borderRadius: '20px',
	background: '#FFFFFF',
}))

const StyledTypographyHeader = styled(Typography)(() => ({
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineHeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const Home = () => {
	return (
		<StyledContainer>
			<StyledTypographyHeader>HOME</StyledTypographyHeader>
			<Link to={'catalog'}>Каталог</Link>
			<Link to={'favorites'}>Избранное</Link>
		</StyledContainer>
	)
}

export default Home
